<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="70" :model="searchForm" class="search-form" inline>
        <Form-item label="选择用户" prop="personnel_id">
          <Select
            v-model="searchForm.personnel_id"
            clearable
            filterable
            @on-change="personnelId"
          >
            <Option
              v-for="item in personnelList"
              :key="item.id"
              :value="item.id"
            >{{ item.name }}
            </Option>
          </Select>
        </Form-item>
        <Form-item style="margin-left:-70px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <Button icon="ios-add" target="_self" type="primary" @click="toAdd">添加</Button>
      <!--      <Button disabled icon="md-cloud-upload">导入</Button>-->
      <Button disabled icon="md-cloud-download">导出</Button>
    </div>
    <div class="table">
      <Row>
        <Alert show-icon>
          已选择
          <span class="select-count">{{ selectCount }}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
          ref="table"
          :columns="columns"
          :data="data"
          :loading="loading"
          border
          size="small"
          @on-selection-change="showSelect"
        >
          <template slot="action" slot-scope="{ row }">
            <a
              class="edit"
              size="small"
              style="color:#2d8cf0;font-size: 12px;"
              type="text"
              @click="toEdit(row)"
            >编辑</a>
            <Divider type="vertical"/>
            <a
              class="del"
              size="small"
              style="color:#ed4014;font-size: 12px;"
              type="text"
              @click="remove(row)"
            >删除</a>
          </template>
        </Table>
      </Row>
      <!-- <Row class="page" justify="end" type="flex">
        <Page
          :current="searchForm.pageNumber"
          :page-size="searchForm.pageSize"
          :total="total"
          @on-change="changePage"
          show-total
        />
      </Row> -->
    </div>
    <Modal
      v-model="modal"
      :mask-closable="false"
      :styles="{top: '20px'}"
      title="添加工伤人员"
      width="850"
      @on-cancel="cancel"
    >
      <Form ref="form" :label-width="160" :model="form" :rules="formValidate">
        <Row>
          <Col span="12">
          <FormItem v-if="model_type==1" label="选择人员" prop="personnel_name">
            <Input v-model="form.personnel_name" placeholder readonly></Input>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem v-if="model_type!=1" label="选择人员" prop="personnel_id">
            <Select
              v-model="form.personnel_id"
              clearable
              filterable
              @on-change="personnelId"
            >
              <Option
                v-for="item in personnelList"
                :key="item.id"
                :value="item.id"
              >{{ item.name }}
              </Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="入职时间" prop="join_at">
            <Input v-model="form.join_at" placeholder="" readonly></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <FormItem label="性别" prop="sex">
            <Input v-model="form.sex" placeholder="" readonly></Input>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="年龄" prop="age">
            <Input v-model="form.age" placeholder="" readonly></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <FormItem label="身份证号" prop="IDCard">
            <Input v-model="form.IDCard" placeholder="" readonly></Input>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="电话" prop="phone">
            <Input v-model="form.phone" placeholder="" readonly></Input>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <FormItem label="工伤时间" prop="injured_at">
            <DatePicker
              v-model="form.injured_at"
              :editable="false"
              placeholder="选择时间"
              type="date"
            ></DatePicker>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="工伤简介" prop="injured_reason">
            <Input v-model="form.injured_reason" :rows="4" placeholder="" type="textarea"></Input>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button :loading="loading" @click="handleReset('form')">重置</Button>
        <Button
          :loading="submitLoading"
          style="margin-left:8px"
          type="primary"
          @click="submitF('form')"
        >保存
        </Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  addInjuredPersonnel,
  editInjuredPersonnel,
  injuredDestroy,
  injuredList,
  personnelList
} from '../../../api/personnel'

export default {
  data() {
    return {
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        personnel_id: '',
        type: 1,
        is_injured: 1,
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      submitLoading: false,
      modal: false,
      form: {
        personnel_id: 0,
        injured_at: '',
        injured_reason: ''
      },
      formValidate: {
        // personnel_id: [{ required: true, message: '请选择人员', trigger: 'change' }],
        // departure_at: [{
        //     type: 'string',
        //     required: true,
        //     message: '请选择离职时间',
        //     trigger: 'change'
        //   }]
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name',
          width: 120,
          fixed: 'left',
          align: 'center'
        },
        {
          title: '工伤时间',
          key: 'injured_at',
          width: 120,
          align: 'right'
        },
        {
          title: '性别',
          key: 'sex',
          width: 90,
          align: 'center'
        },
        // {
        //   title: '身份证号码',
        //   key: 'IDCard',
        //   width: 180,
        //   align: 'left'
        // },
        {
          title: '年龄',
          key: 'age',
          width: 100,
          align: 'center',
        },
        // {
        //   title: '联系电话',
        //   key: 'phone',
        //   width: 150,
        //   align: 'left'
        // },
        {
          title: '入职时间',
          key: 'join_at',
          width: 120,
          align: 'right'
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 200,
          align: 'right'
        },
        {
          title: '操作',
          slot: 'action',
          width: 175,
          fixed: 'right',
          align: 'center'
        }
      ],
      data: [],
      personnelList: [],
      model_type: 0
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getPersonnelList()
      this.clearSelectAll()
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },//在职
    getOnPersonnelList() {
      this.loading = true
      personnelList().then(res => {
        this.loading = false
        if (res.data) {
          this.personnelList = res.data.personnel
        }
      })
    },
    getPersonnelList() {
      this.loading = true
      this.clearSelectAll()
      injuredList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
          this.total = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.getPersonnelList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getPersonnelList()
    },
    init() {
      this.getPersonnelList()
      this.getOnPersonnelList()
    },
    remove(row) {
      injuredDestroy({id: row.id, personnel_id: row.personnel_id}).then(res => {
        if (res.data) {
          this.getPersonnelList()
          this.cancel()
        } else {
          this.$Message.error('删除失败')
        }
      })
    },
    show(index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.personnel[index].name}<br>Age：${this.personnel[index].age}<br>Address：${this.personnel[index].address}`
      })
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.model_type = 0
      this.modal = true
    },
    toEdit(row) {
      this.model_type = 1
      this.form.id = row.id
      this.form.personnel_name = row.name
      this.form.personnel_id = row.personnel_id
      this.form.IDCard = row.IDCard
      this.form.phone = row.phone
      this.form.join_at = row.join_at
      this.form.sex = row.sex
      this.form.age = row.age
      this.form.injured_at = row.injured_at
      this.form.injured_reason = row.injured_reason
      this.modal = true
    },
    submitF() {
      if (this.model_type == 0) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true
            addInjuredPersonnel(this.form).then(res => {
              this.submitLoading = false
              if (res.data) {
                this.modal = false
                this.getPersonnelList()
                this.cancel()
              } else {
                this.$Message.error('保存失败')
              }
            })
          }
        })
      }
      if (this.model_type == 1) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true
            editInjuredPersonnel(this.form).then(res => {
              this.submitLoading = false
              if (res.data) {
                this.modal = false
                this.getPersonnelList()
                this.cancel()
              } else {
                this.$Message.error('保存失败')
              }
            })
          }
        })
      }
    },
    cancel() {
      this.$refs.form.resetFields()
    },
    personnelId() {
      const _this = this
      this.personnelList.forEach(function (c) {
        if (c.id == _this.form.personnel_id) {
          _this.form.IDCard = c.IDCard
          _this.form.phone = c.phone
          _this.form.join_at = c.join_at
          _this.form.sex = c.sex
          _this.form.age = c.age
        }
      })
    }
  }
}
</script>
